import ReactDOM from 'react-dom/client'
import './index.css'
const root=ReactDOM.createRoot(document.querySelector("#root"))
/**
 * react的条件渲染有三种写法
 * 1、if...else语句/switch：比较适合比较复杂的条件判断
 * 2、三元表达式：双分支
 * 3、&&操作：单分支 
 */
let students=[
    {
       no:1,
       name:'刘备',
       gender:1,
       isGz:false 
    },
    {
        no:2,
        name:'貂蝉',
        gender:0,
        isGz:true 
     },
     {
        no:3,
        name:'关羽',
        gender:1,
        isGz:false 
     }, {
        no:4,
        name:'小乔',
        gender:0,
        isGz:false 
     }
]
let getMc=(no)=>{
    switch(no){
        case 1:return {backgroundColor:'red'}
        case 2:return {backgroundColor:'springgreen'}
        case 3:return {backgroundColor:'skyblue'}
    }
}
let template=(<>
    <table>
        <thead>
            <tr>
                <td>排名</td>
                <td>姓名</td>
                <td>性别</td>
                <td>备注</td>
            </tr>
        </thead>
        <tbody>
            {
                students.map((item,index)=><tr key={index}>
                     <td><div className='item' style={getMc(item.no)}>{item.no}</div></td>
                     <td>{item.name}</td>
                     <td>
                        <img src={item.gender==1?require('./assets/boy.jpg'):require('./assets/girl.png')} className='avatar'></img>
                     </td>
                     <td>{item.isGz&&<div className='gz'>关</div>}</td>
                </tr>)
            }
        </tbody>
    </table>
</>)
root.render(template)